<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模块示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        
        .tab-container {
            display: flex;
            justify-content: space-around;
            background-color: #f4f4f4;
            padding: 10px;
            border-bottom: 1px solid #ccc;
        }
        
        .tab-button {
            padding: 10px 20px;
            cursor: pointer;
            background-color: #ddd;
            border: none;
            color: #333;
            border-radius: 5px 5px 0 0;
            transition: background-color 0.3s;
        }
        
        .tab-button.active {
            background-color: #fff;
            border-bottom: none;
        }
        
        .module {
            display: none;
            padding: 20px;
            border: 1px solid #ccc;
            border-top: none;
        }
        
        .module.active {
            display: block;
        }
        
        .album-module .album-item {
            display: inline-block;
            margin: 10px;
            text-align: center;
            background-color: #fff;
            border: 1px solid #ddd;
            padding: 10px;
            border-radius: 5px;
        }
        
        .album-module .album-item img {
            width: 100px;
            height: 100px;
            object-fit: cover;
            border-radius: 5px;
        }
        
        .album-module .album-item button {
            margin-top: 5px;
            padding: 5px 10px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }
        
        .album-module .album-item button:hover {
            background-color: #0056b3;
        }
        
        .action-button {
            padding: 5px 10px;
            background-color: #28a745;
            color: #fff;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            margin: 10px;
        }
        
        .action-button:hover {
            background-color: #218838;
        }
        /* .album-module {
            display: none;
        }
        
        .tieba-module {
            display: block;
        }
        
        .statistics-module {
            display: none;
        } */
        /* 富文本编辑器 */
        
        #toolbar {
            margin-bottom: 20px;
        }
        
        #editor {
            border: 1px solid #ccc;
            padding: 10px;
            min-height: 200px;
            outline: none;
        }
        /* 富文本编辑器 */
    </style>
</head>

<body>
    <div class="tab-container">
        <button class="tab-button active" onclick="showTab('album')">相册</button>
        <button class="tab-button" onclick="showTab('tieba')">贴吧</button>
        <button class="tab-button" onclick="showTab('statistics')">数据统计</button>
    </div>
    <div id="album" class="module active  album-module">
        <!--  -->

        <h2>相册模块</h2>
        <div class="action-button" onclick="createAlbum()">创建相册</div>
        <div class="action-button" onclick="listAlbums()">相册列表</div>
        <div id="album_all">
            <div class="album-item">
                <img src="https://img1.baidu.com/it/u=3518673092,2032183538&fm=253&fmt=auto&app=138&f=JPEG?w=781&h=500" alt="相册1">
                <h3>相册1</h3>
                <button onclick="editAlbum()">编辑</button>
                <button onclick="deleteAlbum()">删除</button>
            </div>
            <div class="album-item">
                <img src="https://img1.baidu.com/it/u=3518673092,2032183538&fm=253&fmt=auto&app=138&f=JPEG?w=781&h=500" alt="相册2">
                <h3>相册2</h3>
                <button onclick="editAlbum()">编辑</button>
                <button onclick="deleteAlbum()">删除</button>
            </div>
        </div>
    </div>
    <div id="tieba" class="module tieba-module">
        <h2>贴吧模块</h2>
        <div>
            <p>2</p>
            <!-- 富文本编辑器 -->
            <div id="toolbar">
                <button onclick="format('bold')">粗体</button>
                <button onclick="format('italic')">斜体</button>
                <button onclick="format('underline')">下划线</button>
                <button onclick="format('justifyLeft')">左对齐</button>
                <button onclick="format('justifyCenter')">居中对齐</button>
                <button onclick="format('justifyRight')">右对齐</button>
                <button onclick="format('insertUnorderedList')">无序列表</button>
                <button onclick="format('insertOrderedList')">有序列表</button>
                <button onclick="format('createLink')">插入链接</button>
                <button onclick="format('insertImage')">插入图片</button>
            </div>
            <div id="editor" contenteditable="true">
                这里可以开始编辑内容...
            </div>
            <!-- 富文本编辑器 -->
        </div>
    </div>
    <div id="statistics" class="module statistics-module">
        <h2>数据统计模块</h2>
        <div>3</div>
    </div>

    <script>
        //tab切换
        function showTab(tabId) {
            const tabs = document.querySelectorAll('.module');
            tabs.forEach(tab => tab.classList.remove('active'));
            document.getElementById(tabId).classList.add('active');

            const tabButtons = document.querySelectorAll('.tab-button');
            tabButtons.forEach(button => button.classList.remove('active'));
            document.querySelector(`.tab-button[onclick="showTab('${tabId}')"]`).classList.add('active');
        }

        function createAlbum() {
            alert('创建相册功能');
        }

        function listAlbums() {
            alert('相册列表功能');
        }

        function editAlbum() {
            alert('编辑相册功能');
        }

        function deleteAlbum() {
            alert('删除相册功能');
        }
        //富文本编辑器
        function format(command, value) {
            if (command === 'createLink') {
                value = prompt('请输入链接地址:', 'http://');
            } else if (command === 'insertImage') {
                value = prompt('请输入图片地址:', 'http://');
            }
            document.execCommand(command, false, value);
        }
        //富文本编辑器
    </script>
</body>

</html>